<script lang="tsx">
import {defineComponent, h, PropType} from "vue"
import {ElButton, ElLink} from "element-plus"
import {useConfirmDialog} from "@/hooks/DialogMsg";

export default defineComponent({
  name: "ConfirmButton",
  emits: {
    confirm: () => true,
    cancel: () => true
  },
  props: {
    type: {
      type: String as PropType<"default" | "success" | "warning" | "info" | "text" | "primary" | "danger" | "error">,
      default: "danger"
    },
    size: {
      type: String as PropType<"default" | "small" | "large">,
      default: "default"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    link: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "确定要继续该操作吗?"
    }
  },
  setup(props, {slots, emit}) {
    const txet = typeof slots.default === 'undefined' ? '确认' : slots.default()
    return () => {
      return h(props.link ? ElLink : ElButton, {
        type: props.type,
        size: props.size,
        disabled: props.disabled,
        class: "app-tap",
        onClick: () => {
          useConfirmDialog(props.title).then(res => {
            if (res) {
              emit('confirm')
            } else {
              emit('cancel')
            }
          })
        }
      }, {
        default: () => txet
      })
    }
  }
})
</script>
<style lang="scss" scoped>
.confirm-button {

}
</style>